'use client';

import Link from 'next/link';
import { GithubIcon } from '@/icons';
import { getPreviousPathname } from './save-previous-pathname';
import { useRouter } from 'next/navigation';
import { Logo } from './logo';

export const SiteHeader = () => {
  const router = useRouter();

  return (
    <div className="relative flex w-full items-center justify-between py-20 lg:max-w-[calc(100%-332px)] 3xl:max-w-none">
      <Link
        href="/"
        className="-mx-6 mr-auto flex items-center gap-8 px-6 text-xl lowercase outline-0 outline-offset-2 outline-focus select-none focus-visible:rounded-sm focus-visible:outline-2"
        style={{ fontFeatureSettings: '"ss02"' }}
        onClick={(event) => {
          if (event.shiftKey || event.altKey || event.metaKey || event.ctrlKey) {
            return;
          }

          const prev = getPreviousPathname();

          // Go back if the previous page was the homepage so that the browser can restore the scroll position
          if (prev === '/') {
            event.preventDefault();
            router.back();
          }
        }}
      >
        <Logo />
        <ShadersWordmark />
      </Link>

      <Link
        href="https://github.com/paper-design/shaders"
        target="_blank"
        className="ml-auto hidden outline-0 outline-offset-4 outline-focus focus-visible:rounded-full focus-visible:outline-2 xs:flex"
      >
        <GithubIcon className="size-28" />
      </Link>
    </div>
  );
};

function ShadersWordmark(props: React.ComponentProps<'svg'>) {
  return (
    <svg width="105" height="40" viewBox="0 0 105 40" fill="currentcolor">
      <path d="M98.7395 31.2321C97.6955 31.2321 96.7579 31.0581 95.9265 30.7101C95.1145 30.3428 94.4475 29.8401 93.9255 29.2021C93.4035 28.5448 93.0459 27.7811 92.8525 26.9111L94.6795 26.3601C94.8922 27.3654 95.3369 28.1388 96.0135 28.6801C96.7095 29.2214 97.6182 29.4921 98.7395 29.4921C99.7642 29.4921 100.586 29.2698 101.205 28.8251C101.823 28.3611 102.133 27.7134 102.133 26.8821C102.133 26.3214 101.959 25.8671 101.611 25.5191C101.282 25.1711 100.866 24.9004 100.364 24.7071C99.8609 24.5138 99.1842 24.3011 98.3335 24.0691C97.3089 23.8178 96.4775 23.5664 95.8395 23.3151C95.2209 23.0444 94.6892 22.6481 94.2445 22.1261C93.7999 21.6041 93.5775 20.8984 93.5775 20.0091C93.5775 19.2744 93.7805 18.6171 94.1865 18.0371C94.5925 17.4378 95.1629 16.9738 95.8975 16.6451C96.6322 16.3164 97.4635 16.1521 98.3915 16.1521C99.7835 16.1521 100.963 16.4808 101.93 17.1381C102.916 17.7761 103.573 18.6558 103.902 19.7771L102.075 20.4731C101.843 19.5838 101.408 18.9361 100.77 18.5301C100.151 18.1048 99.3582 17.8921 98.3915 17.8921C97.5602 17.8921 96.8739 18.0758 96.3325 18.4431C95.8105 18.7911 95.5495 19.2841 95.5495 19.9221C95.5495 20.4054 95.7042 20.8018 96.0135 21.1111C96.3229 21.4204 96.6999 21.6621 97.1445 21.8361C97.6085 21.9908 98.2562 22.1648 99.0875 22.3581C100.17 22.6481 101.04 22.9284 101.698 23.1991C102.374 23.4698 102.954 23.8951 103.438 24.4751C103.921 25.0551 104.163 25.8478 104.163 26.8531C104.163 27.7038 103.931 28.4674 103.467 29.1441C103.003 29.8014 102.355 30.3138 101.524 30.6811C100.692 31.0484 99.7642 31.2321 98.7395 31.2321Z" />
      <path d="M84.373 16.3841H86.345V19.4581C86.751 18.4141 87.3601 17.6021 88.1721 17.0221C89.0034 16.4421 89.9507 16.1521 91.0141 16.1521C91.7681 16.1521 92.3674 16.2584 92.812 16.4711L92.6961 18.3561C92.1547 18.1434 91.5264 18.0371 90.8111 18.0371C89.9411 18.0371 89.1677 18.3174 88.4911 18.8781C87.8337 19.4388 87.3117 20.2508 86.925 21.3141C86.5384 22.3774 86.345 23.6438 86.345 25.1131V31.0001H84.373V16.3841Z" />
      <path d="M75.1848 31.2321C73.7928 31.2321 72.5555 30.9131 71.4728 30.2751C70.4095 29.6371 69.5685 28.7478 68.9498 27.6071C68.3504 26.4471 68.0508 25.1421 68.0508 23.6921C68.0508 22.2421 68.3504 20.9468 68.9498 19.8061C69.5491 18.6654 70.3901 17.7761 71.4728 17.1381C72.5555 16.4808 73.7735 16.1521 75.1268 16.1521C76.5381 16.1521 77.7754 16.4904 78.8388 17.1671C79.9021 17.8438 80.6851 18.7621 81.1878 19.9221C81.6904 21.0821 81.8645 22.3678 81.7098 23.7791H69.1818V22.1551H79.6798C79.6798 21.3044 79.4865 20.5601 79.0998 19.9221C78.7131 19.2841 78.1718 18.7911 77.4758 18.4431C76.7991 18.0758 76.0161 17.8921 75.1268 17.8921C74.1408 17.8921 73.2611 18.1241 72.4878 18.5881C71.7338 19.0521 71.1441 19.7191 70.7188 20.5891C70.2935 21.4591 70.0808 22.4741 70.0808 23.6341C70.0808 24.7748 70.2935 25.7898 70.7188 26.6791C71.1441 27.5491 71.7435 28.2354 72.5168 28.7381C73.3095 29.2408 74.1988 29.4921 75.1848 29.4921C76.3255 29.4921 77.3211 29.1924 78.1718 28.5931C79.0418 27.9744 79.5735 27.2108 79.7668 26.3021L81.5938 26.7661C81.3811 27.6361 80.9751 28.4094 80.3758 29.0861C79.7765 29.7628 79.0225 30.2944 78.1138 30.6811C77.2245 31.0484 76.2481 31.2321 75.1848 31.2321Z" />
      <path d="M58.0384 31.232C56.6077 31.232 55.3414 30.9227 54.2394 30.304C53.1567 29.666 52.3157 28.7767 51.7164 27.636C51.117 26.4954 50.8174 25.1807 50.8174 23.692C50.8174 22.2033 51.117 20.8887 51.7164 19.748C52.3157 18.6073 53.1567 17.7277 54.2394 17.109C55.3414 16.471 56.6077 16.152 58.0384 16.152C59.1984 16.152 60.2714 16.4324 61.2574 16.993C62.2627 17.5344 62.9877 18.2593 63.4324 19.168V10.468H65.4334V31H63.4324V28.187C62.9877 29.0957 62.2627 29.8304 61.2574 30.391C60.2714 30.9517 59.1984 31.232 58.0384 31.232ZM58.1254 29.492C59.15 29.492 60.0587 29.2407 60.8514 28.738C61.6634 28.2354 62.2917 27.549 62.7364 26.679C63.2004 25.809 63.4324 24.8133 63.4324 23.692C63.4324 22.5707 63.2004 21.575 62.7364 20.705C62.2917 19.8157 61.6634 19.1294 60.8514 18.646C60.0587 18.1434 59.15 17.892 58.1254 17.892C57.12 17.892 56.2114 18.1434 55.3994 18.646C54.6067 19.1294 53.9784 19.8157 53.5144 20.705C53.0697 21.575 52.8474 22.5707 52.8474 23.692C52.8474 24.8133 53.0697 25.8187 53.5144 26.708C53.9784 27.578 54.6067 28.2644 55.3994 28.767C56.2114 29.2504 57.12 29.492 58.1254 29.492Z" />
      <path d="M40.805 31.2321C39.3743 31.2321 38.108 30.9228 37.006 30.3041C35.9233 29.6661 35.0823 28.7768 34.483 27.6361C33.8836 26.4954 33.584 25.1808 33.584 23.6921C33.584 22.2034 33.8836 20.8888 34.483 19.7481C35.0823 18.6074 35.9233 17.7278 37.006 17.1091C38.108 16.4711 39.3743 16.1521 40.805 16.1521C41.965 16.1521 43.038 16.4324 44.024 16.9931C45.0293 17.5344 45.7543 18.2594 46.199 19.1681V16.3841H48.2V31.0001H46.199V28.1871C45.7543 29.0958 45.0293 29.8304 44.024 30.3911C43.038 30.9518 41.965 31.2321 40.805 31.2321ZM40.892 29.4921C41.9166 29.4921 42.8253 29.2408 43.618 28.7381C44.43 28.2354 45.0583 27.5491 45.503 26.6791C45.967 25.8091 46.199 24.8134 46.199 23.6921C46.199 22.5708 45.967 21.5751 45.503 20.7051C45.0583 19.8158 44.43 19.1294 43.618 18.6461C42.8253 18.1434 41.9166 17.8921 40.892 17.8921C39.8866 17.8921 38.978 18.1434 38.166 18.6461C37.3733 19.1294 36.745 19.8158 36.281 20.7051C35.8363 21.5751 35.614 22.5708 35.614 23.6921C35.614 24.8134 35.8363 25.8188 36.281 26.7081C36.745 27.5781 37.3733 28.2644 38.166 28.7671C38.978 29.2504 39.8866 29.4921 40.892 29.4921Z" />
      <path d="M18.3271 10.468H20.2991V19.458C20.7825 18.4913 21.4978 17.6987 22.4452 17.08C23.4118 16.4614 24.5235 16.152 25.7801 16.152C26.8048 16.152 27.7135 16.3647 28.5061 16.79C29.3181 17.196 29.9561 17.7954 30.4201 18.588C30.8841 19.3614 31.1161 20.299 31.1161 21.401V31H29.1152V21.807C29.1152 20.9563 28.9605 20.2507 28.6511 19.69C28.3611 19.11 27.9358 18.675 27.3751 18.385C26.8338 18.0757 26.1958 17.921 25.4611 17.921C24.4171 17.921 23.5085 18.2013 22.7351 18.762C21.9618 19.3227 21.3625 20.125 20.9371 21.169C20.5118 22.1937 20.2991 23.3923 20.2991 24.765V31H18.3271V10.468Z" />
      <path d="M8.78827 31.232C7.39627 31.232 6.1396 31 5.01827 30.536C3.91627 30.0527 2.98827 29.347 2.23427 28.419C1.4996 27.4717 0.987266 26.3214 0.697266 24.968L2.64027 24.446C2.93027 26.012 3.62627 27.23 4.72827 28.1C5.8496 28.9507 7.20293 29.376 8.78827 29.376C10.1996 29.376 11.3499 29.057 12.2393 28.419C13.1286 27.7617 13.5733 26.7854 13.5733 25.49C13.5733 24.6394 13.3219 23.953 12.8193 23.431C12.3359 22.8897 11.7366 22.4837 11.0213 22.213C10.3059 21.923 9.33927 21.6137 8.12127 21.285C6.70993 20.9177 5.57893 20.56 4.72827 20.212C3.8776 19.8447 3.14293 19.3033 2.52427 18.588C1.92493 17.8727 1.62527 16.9254 1.62527 15.746C1.62527 14.6827 1.91527 13.7547 2.49527 12.962C3.07527 12.1693 3.86793 11.5603 4.87327 11.135C5.8786 10.6904 6.99993 10.468 8.23727 10.468C9.45527 10.468 10.5476 10.671 11.5143 11.077C12.4809 11.4637 13.2929 12.0243 13.9503 12.759C14.6076 13.4937 15.0523 14.383 15.2843 15.427L13.3993 16.065C13.0706 14.8277 12.4519 13.8997 11.5433 13.281C10.6539 12.643 9.54227 12.324 8.20827 12.324C7.31893 12.324 6.53593 12.4593 5.85927 12.73C5.1826 13.0007 4.6606 13.397 4.29327 13.919C3.92593 14.4217 3.74227 15.0017 3.74227 15.659C3.74227 16.413 3.9646 17.022 4.40927 17.486C4.87327 17.9307 5.43393 18.2787 6.09127 18.53C6.76793 18.7814 7.6766 19.052 8.81727 19.342C10.2866 19.7093 11.4756 20.0863 12.3843 20.473C13.2929 20.8403 14.0663 21.4203 14.7043 22.213C15.3616 22.9863 15.6903 24.0303 15.6903 25.345C15.6903 26.6403 15.3809 27.7327 14.7623 28.622C14.1436 29.492 13.3123 30.1494 12.2683 30.594C11.2436 31.0194 10.0836 31.232 8.78827 31.232Z" />
    </svg>
  );
}
// function ShadersWordmark(props: React.ComponentProps<'svg'>) {
//   return (
//     <svg width="106" height="40" viewBox="0 0 106 40" fill="currentcolor" {...props}>
//       <path d="M94.6322 31.2282C93.6062 31.2282 92.6847 31.0572 91.8677 30.7152C91.0697 30.3542 90.4142 29.8602 89.9012 29.2332C89.3882 28.5872 89.0367 27.8367 88.8467 26.9817L90.6422 26.4402C90.8512 27.4282 91.2882 28.1882 91.9532 28.7202C92.6372 29.2522 93.5302 29.5182 94.6322 29.5182C95.6392 29.5182 96.4467 29.2997 97.0547 28.8627C97.6627 28.4067 97.9667 27.7702 97.9667 26.9532C97.9667 26.4022 97.7957 25.9557 97.4537 25.6137C97.1307 25.2717 96.7222 25.0057 96.2282 24.8157C95.7342 24.6257 95.0692 24.4167 94.2332 24.1887C93.2262 23.9417 92.4092 23.6947 91.7822 23.4477C91.1742 23.1817 90.6517 22.7922 90.2147 22.2792C89.7777 21.7662 89.5592 21.0727 89.5592 20.1987C89.5592 19.4767 89.7587 18.8307 90.1577 18.2607C90.5567 17.6717 91.1172 17.2157 91.8392 16.8927C92.5612 16.5697 93.3782 16.4082 94.2902 16.4082C95.6582 16.4082 96.8172 16.7312 97.7672 17.3772C98.7362 18.0042 99.3822 18.8687 99.7052 19.9707L97.9097 20.6547C97.6817 19.7807 97.2542 19.1442 96.6272 18.7452C96.0192 18.3272 95.2402 18.1182 94.2902 18.1182C93.4732 18.1182 92.7987 18.2987 92.2667 18.6597C91.7537 19.0017 91.4972 19.4862 91.4972 20.1132C91.4972 20.5882 91.6492 20.9777 91.9532 21.2817C92.2572 21.5857 92.6277 21.8232 93.0647 21.9942C93.5207 22.1462 94.1572 22.3172 94.9742 22.5072C96.0382 22.7922 96.8932 23.0677 97.5392 23.3337C98.2042 23.5997 98.7742 24.0177 99.2492 24.5877C99.7242 25.1577 99.9617 25.9367 99.9617 26.9247C99.9617 27.7607 99.7337 28.5112 99.2777 29.1762C98.8217 29.8222 98.1852 30.3257 97.3682 30.6867C96.5512 31.0477 95.6392 31.2282 94.6322 31.2282Z" />
//       <path d="M80.2275 16.6362H82.1655V19.6572C82.5645 18.6312 83.163 17.8332 83.961 17.2632C84.778 16.6932 85.709 16.4082 86.754 16.4082C87.495 16.4082 88.084 16.5127 88.521 16.7217L88.407 18.5742C87.875 18.3652 87.2575 18.2607 86.5545 18.2607C85.6995 18.2607 84.9395 18.5362 84.2745 19.0872C83.6285 19.6382 83.1155 20.4362 82.7355 21.4812C82.3555 22.5262 82.1655 23.7707 82.1655 25.2147V31.0002H80.2275V16.6362Z" />
//       <path d="M70.9133 31.2282C69.5453 31.2282 68.3293 30.9147 67.2653 30.2877C66.2203 29.6607 65.3938 28.7867 64.7858 27.6657C64.1968 26.5257 63.9023 25.2432 63.9023 23.8182C63.9023 22.3932 64.1968 21.1202 64.7858 19.9992C65.3748 18.8782 66.2013 18.0042 67.2653 17.3772C68.3293 16.7312 69.5263 16.4082 70.8563 16.4082C72.2433 16.4082 73.4593 16.7407 74.5043 17.4057C75.5493 18.0707 76.3188 18.9732 76.8128 20.1132C77.3068 21.2532 77.4778 22.5167 77.3258 23.9037H65.0138V22.3077H75.3308C75.3308 21.4717 75.1408 20.7402 74.7608 20.1132C74.3808 19.4862 73.8488 19.0017 73.1648 18.6597C72.4998 18.2987 71.7303 18.1182 70.8563 18.1182C69.8873 18.1182 69.0228 18.3462 68.2628 18.8022C67.5218 19.2582 66.9423 19.9137 66.5243 20.7687C66.1063 21.6237 65.8973 22.6212 65.8973 23.7612C65.8973 24.8822 66.1063 25.8797 66.5243 26.7537C66.9423 27.6087 67.5313 28.2832 68.2913 28.7772C69.0703 29.2712 69.9443 29.5182 70.9133 29.5182C72.0343 29.5182 73.0128 29.2237 73.8488 28.6347C74.7038 28.0267 75.2263 27.2762 75.4163 26.3832L77.2118 26.8392C77.0028 27.6942 76.6038 28.4542 76.0148 29.1192C75.4258 29.7842 74.6848 30.3067 73.7918 30.6867C72.9178 31.0477 71.9583 31.2282 70.9133 31.2282Z" />
//       <path d="M53.7781 31.2278C52.3721 31.2278 51.1276 30.9238 50.0446 30.3158C48.9806 29.6888 48.1541 28.8148 47.5651 27.6938C46.9761 26.5728 46.6816 25.2808 46.6816 23.8178C46.6816 22.3548 46.9761 21.0628 47.5651 19.9418C48.1541 18.8208 48.9806 17.9563 50.0446 17.3483C51.1276 16.7213 52.3721 16.4078 53.7781 16.4078C54.9181 16.4078 55.9726 16.6833 56.9416 17.2343C57.9296 17.7663 58.6421 18.4788 59.0791 19.3718V10.8218H61.0456V30.9998H59.0791V28.2353C58.6421 29.1283 57.9296 29.8503 56.9416 30.4013C55.9726 30.9523 54.9181 31.2278 53.7781 31.2278ZM53.8636 29.5178C54.8706 29.5178 55.7636 29.2708 56.5426 28.7768C57.3406 28.2828 57.9581 27.6083 58.3951 26.7533C58.8511 25.8983 59.0791 24.9198 59.0791 23.8178C59.0791 22.7158 58.8511 21.7373 58.3951 20.8823C57.9581 20.0083 57.3406 19.3338 56.5426 18.8588C55.7636 18.3648 54.8706 18.1178 53.8636 18.1178C52.8756 18.1178 51.9826 18.3648 51.1846 18.8588C50.4056 19.3338 49.7881 20.0083 49.3321 20.8823C48.8951 21.7373 48.6766 22.7158 48.6766 23.8178C48.6766 24.9198 48.8951 25.9078 49.3321 26.7818C49.7881 27.6368 50.4056 28.3113 51.1846 28.8053C51.9826 29.2803 52.8756 29.5178 53.8636 29.5178Z" />
//       <path d="M36.5565 31.2282C35.1505 31.2282 33.906 30.9242 32.823 30.3162C31.759 29.6892 30.9325 28.8152 30.3435 27.6942C29.7545 26.5732 29.46 25.2812 29.46 23.8182C29.46 22.3552 29.7545 21.0632 30.3435 19.9422C30.9325 18.8212 31.759 17.9567 32.823 17.3487C33.906 16.7217 35.1505 16.4082 36.5565 16.4082C37.6965 16.4082 38.751 16.6837 39.72 17.2347C40.708 17.7667 41.4205 18.4792 41.8575 19.3722V16.6362H43.824V31.0002H41.8575V28.2357C41.4205 29.1287 40.708 29.8507 39.72 30.4017C38.751 30.9527 37.6965 31.2282 36.5565 31.2282ZM36.642 29.5182C37.649 29.5182 38.542 29.2712 39.321 28.7772C40.119 28.2832 40.7365 27.6087 41.1735 26.7537C41.6295 25.8987 41.8575 24.9202 41.8575 23.8182C41.8575 22.7162 41.6295 21.7377 41.1735 20.8827C40.7365 20.0087 40.119 19.3342 39.321 18.8592C38.542 18.3652 37.649 18.1182 36.642 18.1182C35.654 18.1182 34.761 18.3652 33.963 18.8592C33.184 19.3342 32.5665 20.0087 32.1105 20.8827C31.6735 21.7377 31.455 22.7162 31.455 23.8182C31.455 24.9202 31.6735 25.9082 32.1105 26.7822C32.5665 27.6372 33.184 28.3117 33.963 28.8057C34.761 29.2807 35.654 29.5182 36.642 29.5182Z" />
//       <path d="M14.1807 10.8218H16.1187V19.6568C16.5937 18.7068 17.2967 17.9278 18.2277 17.3198C19.1777 16.7118 20.2702 16.4078 21.5052 16.4078C22.5122 16.4078 23.4052 16.6168 24.1842 17.0348C24.9822 17.4338 25.6092 18.0228 26.0652 18.8018C26.5212 19.5618 26.7492 20.4833 26.7492 21.5663V30.9998H24.7827V21.9653C24.7827 21.1293 24.6307 20.4358 24.3267 19.8848C24.0417 19.3148 23.6237 18.8873 23.0727 18.6023C22.5407 18.2983 21.9137 18.1463 21.1917 18.1463C20.1657 18.1463 19.2727 18.4218 18.5127 18.9728C17.7527 19.5238 17.1637 20.3123 16.7457 21.3383C16.3277 22.3453 16.1187 23.5233 16.1187 24.8723V30.9998H14.1807V10.8218Z" />
//       <path d="M6.05503 31.2282C5.02903 31.2282 4.10753 31.0572 3.29053 30.7152C2.49253 30.3542 1.83703 29.8602 1.32403 29.2332C0.811031 28.5872 0.459531 27.8367 0.269531 26.9817L2.06503 26.4402C2.27403 27.4282 2.71103 28.1882 3.37603 28.7202C4.06003 29.2522 4.95303 29.5182 6.05503 29.5182C7.06203 29.5182 7.86953 29.2997 8.47753 28.8627C9.08553 28.4067 9.38953 27.7702 9.38953 26.9532C9.38953 26.4022 9.21853 25.9557 8.87653 25.6137C8.55353 25.2717 8.14503 25.0057 7.65103 24.8157C7.15703 24.6257 6.49203 24.4167 5.65603 24.1887C4.64903 23.9417 3.83203 23.6947 3.20503 23.4477C2.59703 23.1817 2.07453 22.7922 1.63753 22.2792C1.20053 21.7662 0.982031 21.0727 0.982031 20.1987C0.982031 19.4767 1.18153 18.8307 1.58053 18.2607C1.97953 17.6717 2.54003 17.2157 3.26203 16.8927C3.98403 16.5697 4.80103 16.4082 5.71303 16.4082C7.08103 16.4082 8.24003 16.7312 9.19003 17.3772C10.159 18.0042 10.805 18.8687 11.128 19.9707L9.33253 20.6547C9.10453 19.7807 8.67703 19.1442 8.05003 18.7452C7.44203 18.3272 6.66303 18.1182 5.71303 18.1182C4.89603 18.1182 4.22153 18.2987 3.68953 18.6597C3.17653 19.0017 2.92003 19.4862 2.92003 20.1132C2.92003 20.5882 3.07203 20.9777 3.37603 21.2817C3.68003 21.5857 4.05053 21.8232 4.48753 21.9942C4.94353 22.1462 5.58003 22.3172 6.39703 22.5072C7.46103 22.7922 8.31603 23.0677 8.96203 23.3337C9.62703 23.5997 10.197 24.0177 10.672 24.5877C11.147 25.1577 11.3845 25.9367 11.3845 26.9247C11.3845 27.7607 11.1565 28.5112 10.7005 29.1762C10.2445 29.8222 9.60803 30.3257 8.79103 30.6867C7.97403 31.0477 7.06203 31.2282 6.05503 31.2282Z" />
//     </svg>
//   );
// }
